<template>
    <div class="box_big">
        <img src="/img/common/b239a63c_E752210_ccabe554.jpg" alt="" class="imgTitle">
        <img src="/img/common/1567748221608.png" alt="" class="imgCover">
        <h1>更多超值好礼等你来拿</h1>
        <div class="lucky_draw_square">
            <div class="top">
                <span index_="1" class="square "></span>
                <span index_="2" class="square"></span>
                <span index_="3" class="square"></span>
                <span index_="4" class="square"></span>
            </div>
            <div class="content">
                <div class="content_l">
                    <span class="square" index_="12"></span>
                    <span class="square" index_="11"></span>
                </div>
                <div class="choose">
                    <button class="choose_title" :disabled="disabled">抽</button>
                    <p class="prompt">每次抽奖消耗10积分</p>
                </div>
                <div class="content_r">
                    <span class="square" index_="5"></span>
                    <span class="square" index_="6"></span>
                </div>
            </div>
            <div class="bottom">
                <span class="square" index_="10"></span>
                <span class="square" index_="9"></span>
                <span class="square" index_="8"></span>
                <span class="square" index_="7"></span>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: "DrawSquares",
    props:['prize','start'],
    data(){
      return{
          disabled:false,

      }
    },
    mounted() {
        let a = document.querySelector(".choose_title")
        let square = document.querySelectorAll(".square");
        let arrSquare = this.sortSquare(square)
        a.addEventListener("click", () => {this.lottery(arrSquare);})
    },
    watch:{
        prize(newValue,oldValue){
            this.prize = newValue;
        }
    },
    methods: {
        lottery(arrSquare) {
            this.disabled = true
            let time_ = Math.random() * (36 - 13) + 13;
            let result = Math.floor(time_);
            let i = 0;
            let count = 0;
            let index_ =0;
            let frequency = this.examine(result, count)
            if (frequency > 12) {
                result = frequency % 12 === 0 ? 12 : frequency % 12;
            }
            let squareTime = setInterval(() => {
                if (i === frequency) {
                    clearInterval(squareTime)
                    if((result-1)>11){
                        result = 11;
                    }
                    alert("恭喜获得“" +arrSquare[result-1].innerHTML+ "“奖励")
                        arrSquare[result-1].className = 'square';
                        arrSquare[result-1].style.backgroundColor = "#f67272";
                        arrSquare[result-1].style.color = "#fcfafa";
                    this.disabled = false
                    return 0;
                }
                for (let j = 0; j < arrSquare.length; j++) {
                    arrSquare[j].className = 'square';
                    arrSquare[j].style.backgroundColor = "#f67272";
                    arrSquare[j].style.color = "#fcfafa";
                }
                if (i === 12 || i > 11) {
                    index_ = i % 12;
                }else index_ = i;
                arrSquare[index_].className = 'square big';
                arrSquare[index_].style.backgroundColor = "rgb(224,57,57)";
                arrSquare[index_].style.color = "#fff";
                i++;
            }, 300)

        },
        sortSquare(item) {
            let arr = [];
            for (let i = 0; i < item.length; i++) {
                item[i].innerHTML = this.prize[i]
                if (i < 4) {
                    arr.push(item[i]);
                } else {
                    for (let j = 4; j < item.length; j++) {
                        if (item[j].getAttribute("index_") === (i + 1) + "") {
                            arr.push(item[j])
                            break;
                        }
                    }
                }
            }
            return arr;
        },
        examine(item, count) {
            let result = item;
            if (item > 12) {
                result = item % 12 === 0 ? 12 : item % 12;
            }
            if (count < 30) {
                if (count < 20) {
                    if (result === 10 || result === 4 || result === 1 || result === 7) {
                        return item-=1;
                    }
                } else if (result === 1 && result === 7) {
                    item-=1;
                }
            }
            return item;
        }
    },
}
</script>

<style scoped>
h1{
    color: white;
    font-weight: bold;
}
.box_big {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: url("/img/common/b239a63c_E752210_ccabe554.jpg") no-repeat center 100%;
}

.lucky_draw_square {
   margin-top: 90px;
}

.square {
    display: inline-block;
    width: 90px;
    height: 90px;
    margin: 3px;
    border-radius: 6px;
    text-align: center;
    line-height: 90px;
    color: #fbf4cb;
    font-weight: bold;
    border: 2px solid #ffffff;
    background-color: #f67272;
}

.choose {
    width: 170px;
    height: 170px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: rgb(245, 243, 241,.5);
    cursor: pointer;
}

.choose {
    opacity: .9;
}

.choose_title {
    width: 100px;
    height: 100px;
    border: 2px solid #fff;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    font-size: 25px;
    color: rgb(253, 247, 247);
    font-weight: bolder;
    background: #ee4f4f;
    transition: all .5s;
}
.choose_title:hover{
    opacity: 0.9;
    color: #ee4f4f;
    border: 2px solid #ee4f4f;
    background-color: white;
}
.prompt {
    font-size: 13px;
    color: #f37474;
    margin-top: 20px;
    font-weight: bolder;
}

.content {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.top span {
    margin-bottom: 0;
}

.content_l, .content_r {
    display: flex;
    flex-direction: column;
}
.big{
    transition: all .3s;
    transform: scale(1.2);
}
.imgTitle{
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    min-height: 250px;

}
.imgCover{
    position: absolute;
    top: -2%;
    left: 50%;
    height: 200px;
    transform: translateX(-50%);
}
.imgLeft{
    position: absolute;
    top: -2%;
    left: 50%;
    height: 200px;
}
</style>